<template>
  <div>
    <van-nav-bar
      fixed
      :title="title"
      left-arrow
      @click-left="$utils.back($route.path);"
    />
    <div class="has-top ">
      <div class=" pb-1">
        <div class="mlr-25">
          <content-search
            theme="1"
            :search-val="searchVal"
            :placeholder="searchTips"
            @clear="clear"
            @getVal="getVal"
            @search="search"
          />
        </div>
      </div>
      <div class="mlr-25 ">
        <ul class="">
          <li v-for="(item, index) in productList" :key="index" class="mtb-20  br-10 ofh bg-white"
            @click="setUser(item)">
            <div>
              <div class="plr-25 pt-10 flex-s-s ddd">
                <p class="color-black lh-lg fw-500 fs-30">{{item.RealName}}<span class="tag fs-22 plr-10 ml-10">{{item.CardNumber}}</span></p>
                <div class="dengji pr-20">
                  <img src="@/assets/images/pay/dengji.png" style="width: 20px;height: 24px;" class="mr-10">
                  <div class="fs-20 color-white">{{item.GradeName}}</div>
                </div>
              </div>
              <div class="plr-25 pb-10" v-if="item.InvitUserName">
                <p class="color-black lh-lg fw-500 fs-28">推荐人：{{item.InvitUserName}}</p>
              </div>
              <div class="flex pb-20 plr-25">
                <div class="productItem-detail flex-s-c">
                  <headPortrait-box
                    class="img-box1 pos-r br-full is-80 flex-s-0 mr-10"
                    :head-portrait-url="item.HeadPortrait"
                  />
                  <div class="productItem-detail flex-1">
                    <p class="color-gray-light fs-24">电话：{{item.Tel}}</p>
                    <p class="color-gray-light fs-24">地址：{{item.ProvinceName}}{{item.CityName}}{{item.AreaName}}{{item.StreetName}}{{item.Address}}</p>
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <no-data v-if="productList.length === 0" />
        <p v-if="end===true&&productList.length!==0" class="tac fs-24 ptb-40 color-gray-light">无更多数据</p>
      </div>
    </div>
  </div>
</template>

<script>
import contentSearch from 'components/contentSearch'
import noData from 'components/noData'
import productList from 'components/productList'
import datetimeFilter from 'components/datetimeFilter'
import { GetWriteoffRecordPage } from 'api/writeoff'
import { GetUserPageFromStore, GetStoreMemberTotal } from 'api/member'
import headPortraitBox from 'components/headPortraitBox'

import imgBox from 'components/imgBox'
export default {
  components: {
    contentSearch,
    noData,
    productList,
    datetimeFilter,
    imgBox,
    headPortraitBox
  },
  data() {
    return {
      bgWhite: true,
      searchVal: '',
      // 时间选择框显示
      timeStartSelect: false,
      timeEndSelect: false,

      GetWriteoffRecordPageRequest: {
        PageIndex: 1,
        PageSize: 10,
      },

      // 记录列表
      productList: [],

      // 滚动状态
      totalAmout: 0,
      scollRequest: true,
      end: false,
			title: '会员列表',
			searchTips: '请输入会员号/姓名/手机',
			type: 0,
      behalf:0,//代客下单
      quotation:0
    }
  },
  created() {
		if(this.$route.query.behalf){
		  this.behalf = 1
		}
    if(this.$route.query.quotation){
		  this.quotation = 1
		}
    this.GetWriteoffRecordPage()
  },
  mounted() {
    this.$nextTick(function() {
      window.addEventListener('scroll', this.onScroll)
    })
  },
  methods: {
    search(val) {
      this.scollRequest = true
      this.end = false
      this.GetWriteoffRecordPageRequest.keywords = val
      this.GetWriteoffRecordPageRequest.PageIndex = 1
      this.productList = []
      this.GetWriteoffRecordPage()
    },
    clear() {
      this.searchVal = undefined
    },
    getVal(val) {
      this.searchVal = val
    },
    openDatetimeSelect() {
      debugger
      this.timeStartSelect = true
    },
    onStartConfirm() {
      this.timeStartSelect = false
      this.timeEndSelect = true
    },
    onEndConfirm() {
      this.timeStartSelect = false
      this.timeEndSelect = false
    },
    close() {
      this.timeStartSelect = false
      this.timeEndSelect = false
    },

    // 时间筛选
    getData(value) {
      this.scollRequest = true
      this.end = false
      this.clear()

      this.GetWriteoffRecordPageRequest.PageIndex = 1
      this.GetWriteoffRecordPageRequest.SearchKey = undefined
      this.GetWriteoffRecordPageRequest.StartTime = value.startDate ? value.startDate.replace(/\./g, '-') : null
      this.GetWriteoffRecordPageRequest.EndTime = value.endDate ? value.endDate.replace(/\./g, '-') : null
      this.productList = []
      this.GetWriteoffRecordPage()
    },
    GetWriteoffRecordPage() {
      GetUserPageFromStore(this.GetWriteoffRecordPageRequest).then(res => {
        if (res) {
          if (res.Data.Data.length && res.Data.Data.length > 0) {
            res.Data.Data.forEach(tem => {
              tem.Id = tem.ID
              this.productList.push(tem)
            })
          }
          this.totalAmout = res.Data.TotalAmout
          this.scollRequest = true
        }
      })
    },
    setUser(item){
      localStorage.setItem('customerUser', JSON.stringify(item));
      if(this.behalf==1){
        setTimeout(e =>{
          this.$router.push({ path: '/quickPlaceOrder?Guestplace='+1+'&behalf='+1+"&ValetUserId="+item.UserId });
        },100)
      }else{
        setTimeout(e =>{
          if(this.quotation==1){
            this.$router.replace({ path: '/quotation' });

          }else{
            this.$router.replace({ path: '/customer' });
          }
        },100)
      }
    
    },
    // 滚动事件触发下拉加载
    onScroll() {
      const _this = this
      if (_this.scollRequest === true) {
        if (_this.$utils.getScrollHeight() - _this.$utils.getClientHeight() - _this.$utils.getScrollTop() <= 5) {
          _this.scollRequest = false
          // alert('触发！！！')
          console.log('加载')
          if (_this.GetWriteoffRecordPageRequest.PageIndex < _this.totalAmout) {
            _this.GetWriteoffRecordPageRequest.PageIndex++
            _this.GetWriteoffRecordPage()
          } else {
            console.log('end')
            _this.end = true
          }
          // }
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.van-hairline--bottom::after{
  border-bottom-width:0;
}
.color-red{
  color: #F1270C;
}
.tag{
  width: 64px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  background: #FFF2F0;
  color: #F1270C;
  border-radius: 4px;

}
.img-box1{

  width: 64px;
  height: 64px;
}
.dengji{
  display: flex;
  align-items: center;
  height: 30px;
  background: #444444;
  transform: skewX(-15deg);
  img{
    margin-left: -20px;
  }
}
.ddd{
  align-items: center;
}
</style>
